<template>
  <div>
    <nav-bar :title="title"></nav-bar>

    <div class="appeal-main">
      <van-form @submit="onSubmit">
        <van-field
          required
          v-model="formParams.name"
          name="诉求人姓名"
          label="诉求人姓名"
          placeholder="诉求人姓名"
          :rules="[{ required: true, message: '请填写诉求人姓名' }]"
        />

        <van-field
          required
          readonly
          clickable
          name="sexName"
          v-model="formParams.sexName"
          label="性别"
          right-icon="arrow"
          placeholder="点击选择性别"
          @click="dictOpenPopup('sex')"
        />
        <van-field v-model="formParams.age" type="number" name="年龄" label="年龄" placeholder="年龄" />

        <van-field
          required
          v-model="formParams.phone"
          type="number"
          name="联系方式"
          label="联系方式"
          placeholder="联系方式"
          :rules="[{ required: true, message: '请填写联系方式' }]"
        />

        <van-field
          required
          v-model="formParams.address"
          type="string"
          name="住址"
          label="住址"
          placeholder="住址"
          :rules="[{ required: true, message: '请填写住址' }]"
        />

        <van-field
          required
          v-model="formParams.detailInfo"
          rows="5"
          autosize
          label="详情"
          type="textarea"
          placeholder="请输入详情"
          :rules="[{ required: true, message: '请填写详情' }]"
        />

        <div style="margin: 16px" class="btn">
          <van-button round type="info" native-type="submit">提交</van-button>
          <van-button round type="info" @click="$router.push('/propertyManagement/AttendanceClock')">取消</van-button>
        </div>
      </van-form>
      <!-- 字典项 -->
      <van-popup v-model="dictPopupShow" round position="bottom" @close="dictValue = ''">
        <van-picker
          show-toolbar
          :default-index="dictData[dictType] && dictData[dictType].findIndex(o => o.code === dictValue)"
          :columns="dictData[dictType]"
          value-key="description"
          @cancel="dictPopupShow = false"
          @confirm="dictOnConfirm"
        />
      </van-popup>

      <van-popup v-model="show" closeable close-icon="close" position="bottom" class="pop">提交成功</van-popup>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import propertyManagement from '@/api/propertyManagement'
import { formParams } from '../libs/data'
import SelectPopup from '@/mixins/selectPopup'

export default {
  mixins: [SelectPopup],
  data() {
    return {
      title: '诉求服务',
      // username: '',
      // password: '',
      value: '',
      // sex: 1,
      showPicker: false,
      // age: '',
      // contactWay: '', // 联系方式
      // address: '', // 住址
      // details: '', // 详情
      formParams: { ...formParams },
      columns: ['男', '女'],
      show: false,
      dictTypes: 'sex'
    }
  },
  created() {
    this.getDict(this.dictTypes)
  },
  mounted() {},
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },

  methods: {
    onSubmit() {
      // console.log('submit', values)
      // this.addForm.sex = this.addForm.sex
      console.log(this.formParams)
      // this.addForm.sex = '1' // 字典项
      this.formParams.submitTime = new Date()
      console.log(this.formParams.submitTime)

      propertyManagement.Grid.save(this.formParams).then(res => {
        if (res.data.status === 0) {
          console.log('提交成功')
          this.show = true
          setTimeout(
            () =>
              this.$router.push({
                path: '/propertyManagement/AttendanceClock'
              }),
            1000
          )
        } else {
          console.log('提交失败')
        }
      })
    }
    // onConfirm(value) {
    //   this.formParams.sex = value
    //   this.showPicker = false
    // }
  }
}
</script>

<style scoped lang="less">
.appeal-main {
  width: 100%;
  height: 100%;
  margin: 100px 0 120px 0;
  background-color: pink;
  .btn {
    width: 100%;
    margin: 0 !important;
    position: fixed;
    bottom: 20px;
    left: 0;
    display: flex;
    justify-content: space-around;
  }
  .pop {
    font-size: 50px;
    height: 30%;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
